<template>
  <div class="addPet">
    <el-form :model="formInline" label-position="top" size="large">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="商品名称">
            <el-input v-model="formInline.name" placeholder="商品名称" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品描述">
            <el-input v-model="formInline.description" placeholder="商品描述" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="商品分类">
            <el-select v-model="formInline.category" placeholder="请选择商品分类">
              <el-option
                v-for="category in categories"
                :key="category"
                :label="category"
                :value="category"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品类别">
            <el-input v-model="formInline.coos" placeholder="商品类别" clearable />
          </el-form-item>
        </el-col>
      </el-row> 
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="商品价格">
            <el-input v-model="formInline.price" placeholder="商品价格" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库存数量">
            <el-input
              v-model="formInline.availability"
              placeholder="库存数量"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="商品重量">
            <el-input
              v-model="formInline.goods"
              type="tel"
              placeholder="商品重量"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话">
            <el-input
              v-model="formInline.phone"
              type="tel"
              placeholder="联系电话"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="商品产地">
            <el-input
              v-model="formInline.site"
              type="tel"
              placeholder="商品产地"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品品牌">
            <el-input v-model="formInline.brand" placeholder="商品品牌" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <div class="upload" @click="xxx">
          <img v-if="selectedImageUrl" :src="selectedImageUrl" alt="Selected Image" />
          <img v-else-if="!filterPet" src="@/assets/upload.png" alt="" />
          <img v-else class="uploadimg" :src="`http://localhost:3000/${filterPet?.avatarName}`" alt="" />
          <input
            type="file"
            name="file"
            ref="file"
            style="display: none"
            @change="handleFileChange"
          />
        </div>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">{{ "修改" }}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, useTemplateRef, defineEmits, defineProps } from "vue";
import { addshop, updateshop } from "@/utils/zqb-axios";
import { ElNotification } from "element-plus";

const { filterPet } = defineProps(["filterPet"]);

import { useCounterStore } from "@/stores/counter";
const stores = useCounterStore();
const { token } = stores;

const categories = ["狗类", "猫类", "小宠"];

const emit = defineEmits(["handleDraewr"]);

const formInline = ref(
  filterPet || {
    name: "",
    description: "",
    category: "",
    brand: "",
    price: null,
    availability: "",
    goods: "",
    phone: "",
    site: "",
    coos: "",
  }
);

// 上传图片
const files = useTemplateRef("file");
const selectedImageUrl = ref(null);
const xxx = () => {
  files.value.click();
};

const handleFileChange = () => {
  const file = files.value.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = function (e) {
      selectedImageUrl.value = e.target.result;
    };
    reader.readAsDataURL(file);
    console.log(selectedImageUrl);
  }
};

// 提交数据，添加宠物领养信息
const onSubmit = () => {
  const {
    name,
    description,
    category,
    brand,
    price,
    availability,
    goods,
    phone,
    site,
    coos,
  } = formInline.value;

  let formData = {
    id: filterPet._id,
    name,
    description,
    category,
    brand,
    price,
    availability,
    goods,
    phone,
    site,
    coos,
    avatar: files.value.files[0], // 使用文件选择框的文件
  };
  updateshop(formData).then((res) => {
    ElNotification({
      title: "修改成功",
      message: " 成功修改 1 条数据",
      type: "success",
    });
  });
  console.log("updatePet submit!", formInline.value);
  emit("handleDraewr");
};
</script>

<style lang="less" scoped>
.uploadimg{
  width: 180rem!important;
  height: 180rem!important;
  object-fit: cover;
}
.addPet {
  box-shadow: 0 0 0 0 #000;
  border-radius: 20rem;
  background-color: #fff;
  padding: 0;

  .upload {
    img {
      width: 180rem!important;
      height: 180rem!important;
    }
  }
}

.demo-form-inline .el-input {
  --el-input-width: 220rem;
}

.demo-form-inline .el-select {
  --el-select-width: 220rem;
}

// .el-button, .el-button.is-round{
//     margin: auto;
//     // padding: 0 26rem;
// }
</style>
